<template>
	<div>
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">管理</BreadcrumbItem>
			    <BreadcrumbItem to="/wechat/manager/material?type=text">素材管理[文本]</BreadcrumbItem>
			    <BreadcrumbItem href="">更新</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
		    		<FormItem prop="name" label="文本名">
			            <IInput v-model="form.name" size="large" placeholder="输入文本名" />
			        </FormItem>
			        <FormItem prop="content" label="内容">
						<SystemTextArea ref="content" :callback="changeCallBack"></SystemTextArea>
			        </FormItem>
			        <FormItem>
			        	<Button type="primary" @click="submit('form')">提交</Button>
			        </FormItem>
		    	</IForm>
		    </div>
		</div>
	</div>
</template>
<script>
	import {Row,Col,Breadcrumb,Form,Input,Button} from 'iview';

    import SystemTextArea from 'admin/components/common/textarea';

	export default{
		components:{
			Row,
            'ICol':Col,
			Breadcrumb,
            "BreadcrumbItem" : Breadcrumb.Item,
			'IInput' : Input,
			'IForm' : Form,
			'FormItem' : Form.Item,
			Button,
			SystemTextArea,
        },
        data () {
        	const validateMaxContent = (rule, value, callback) => {
        		if(!this.$refs.content.status){
        			callback(new Error('已超出最大字数'));
        		}
        		callback();
            };
            return {
            	form :{
					id : 0,
					name : '',
					content : '',
                },
				formRule: {
	                name: [{ required: true, message: '请输入文本名', trigger: 'blur' }],
	                content: [
	                	{ required: true, message: '请输入内容', trigger: 'blur' },
	                	{ validator: validateMaxContent, trigger: 'blur' }
	                ],
	            }
            }
        },
        methods:{
        	submit(name){
        		this.form.content = this.$refs.content.content;
        		this.$refs[name].validate((valid) => {
	                if (!valid) {
	                    return false;
	                }
	                this.Axios.Wechat.Manager.Material.Text.Update(this.form)
	                .then(res=>{
	                    if(!res) return false;
	                    this.$router.push('/wechat/manager/material?type=text');
	                })
	            })
        	},
        	changeCallBack(content){
        		this.form.content = content;
        	},
        },
        created:function(){
        	if(this.$route.params.id==undefined) return false;
            var id = this.$route.params.id;
            this.text_id = id;
            this.Axios.Wechat.Manager.Material.Text.Get(id)
                .then(res =>{
                    if(!res) return false;
                    var data = res.data;
                    this.form.id = data.id;
                    this.form.name = data.name;
                    this.$refs.content.content = data.content;
                })
        }
	}
</script>